<!doctype html>
<html lang="en">
    <head>
	<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0B8SXQJEDD"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-0B8SXQJEDD');
</script>

        <script data-ad-client="ca-pub-7271246650502829" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7271246650502829"
                crossorigin="anonymous"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title> OpenGL Step by Step - OpenGL Development </title>
        <meta name="description" content="Modern OpenGL tutorials">

        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600">
        <link rel="stylesheet" href="www/style.css">
        <link rel="stylesheet" href="www/print.css" media="print">

        <script src="www/html5shiv.min.js"></script>
        <script src="www/html5shiv-printshiv.min.js"></script>      

</head>
<body>
        <header id="navigation">
                <a id="logo" href="index.html" title="Homepage">
                        <img src="www/logo hdpi.png">
                </a>

                <div class="no-print">
                        <ul>
                                <li><a href="https://www.youtube.com/channel/UC7Z1FTCdSln_qFKK95AWplw"> Youtube </a></li>
                                <li><a href="instructions.html"> Instructions </a></li>
                                <li><a href="faq.html"> FAQ </a></li>
                                <li><a href="news.html"> News </a></li>
                                <li><a href="contact.html"> Contact </a></li>
                                <li><a href="donate.html"> Donate </a></li>
                        </ul>

                        <ul>
                                <li><a href="https://github.com/emeiri/ogldev" class="highlight"> Get the source </a></li>
                                <li><a href="http://jeux.developpez.com/tutoriels/OpenGL-ogldev/"> Français </a></li>
                                <li><a href="http://triplepointfive.github.io/ogltutor/"> Pусский </a></li>
                                <li><a href="https://www.zhihu.com/column/c_1375900139991678976"> 中文 </a></li>
                        </ul>
                </div>
        </header>

        <!--
             <script src="http://connect.facebook.net/en_US/all.js"></script>
             <script>
             FB.init({
             status : true, // check login status
             cookie : true, // enable cookies to allow the server to access the session
             xfbml  : true  // parse XFBML
             });
             </script>

             <div class="fb-like" data-send="true" data-width="450" data-show-faces="true">
             <fb:like href="http://www.facebook.com/pages/Ogldev/188319114585587" layout="standard" show_faces="true" width="500" action="like" font="segoe ui" colorscheme="light" />
             </div>
        -->

        <h1>Latest video!</h1>
        <br>
		
<iframe width="560" height="315" src="https://www.youtube.com/embed/vHhxfFdfSog?si=HfoYEz9p4bJYcPIh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

        <br>
        <br>
        <h1>Table Of Contents</h1>
        <br>
        <section id="homepage" class="breakpoint">
                <article>
                        <a class="preview" href="www/tutorial01/tutorial01.html">
                                <img src="tutorial01.jpg">
                        </a>
                        <h3> Tutorial 1: </h3>
                        <h2> Open a window </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial02/tutorial02.html">
                                <img src="tutorial02.jpg">
                        </a>
                        <h3> Tutorial 2: </h3>
                        <h2> Hello dot! </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial03/tutorial03.html">
                                <img src="tutorial03.jpg">
                        </a>
                        <h3> Tutorial 3: </h3>
                        <h2> First triangle </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial04/tutorial04.html">
                                <img src="tutorial04.jpg">
                        </a>
                        <h3> Tutorial 4: </h3>
                        <h2> Shaders </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial05/tutorial05.html">
                                <img src="tutorial05.jpg">
                        </a>
                        <h3> Tutorial 5: </h3>
                        <h2> Uniform variables </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial06/tutorial06.html">
                                <img src="tutorial06.jpg">
                        </a>
                        <h3> Tutorial 6: </h3>
                        <h2> Translation transformation </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial07/tutorial07.html">
                                <img src="tutorial07.jpg">
                        </a>
                        <h3> Tutorial 7: </h3>
                        <h2> Rotation transformation </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial08/tutorial08.html">
                                <img src="tutorial08.jpg">
                        </a>
                        <h3> Tutorial 8: </h3>
                        <h2> Scaling transformation </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial09/tutorial09.html">
                                <img src="tutorial09.jpg">
                        </a>
                        <h3> Tutorial 9: </h3>
                        <h2> Interpolation </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial10/tutorial10.html">
                                <img src="tutorial10.jpg">
                        </a>
                        <h3> Tutorial 10: </h3>
                        <h2> Indexed draws </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial11/tutorial11.html">
                                <img src="tutorial11.jpg">
                        </a>
                        <h3> Tutorial 11: </h3>
                        <h2> Concatenating transformations </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial12/tutorial12.html">
                                <img src="tutorial12.jpg">
                        </a>
                        <h3> Tutorial 12: </h3>
                        <h2> Perspective Projection </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial13/tutorial13.html">
                                <img src="tutorial13.jpg">
                        </a>
                        <h3> Tutorial 13: </h3>
                        <h2> Camera Space </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial14/tutorial14.html">
                                <img src="tutorial14.jpg">
                        </a>
                        <h3> Tutorial 14: </h3>
                        <h2> Camera Control - Part 1 </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial15/tutorial15.html">
                                <img src="tutorial15.jpg">
                        </a>
                        <h3> Tutorial 15: </h3>
                        <h2> Camera Control - Part 2 </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial16/tutorial16.html">
                                <img src="tutorial16.jpg">
                        </a>
                        <h3> Tutorial 16: </h3>
                        <h2> Basic Texture Mapping </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial17/tutorial17.html">
                                <img src="tutorial17.jpg">
                        </a>
                        <h3> Tutorial 17: </h3>
                        <h2> Ambient Lighting </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial18/tutorial18.html">
                                <img src="tutorial18.jpg">
                        </a>
                        <h3> Tutorial 18: </h3>
                        <h2> Diffuse Lighting </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial19/tutorial19.html">
                                <img src="tutorial19.jpg">
                        </a>
                        <h3> Tutorial 19: </h3>
                        <h2> Specular Lighting </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial20/tutorial20.html">
                                <img src="tutorial20.jpg">
                        </a>
                        <h3> Tutorial 20: </h3>
                        <h2> Point Light </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial21/tutorial21.html">
                                <img src="tutorial21.jpg">
                        </a>
                        <h3> Tutorial 21: </h3>
                        <h2> Spot Light </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial22/tutorial22.html">
                                <img src="tutorial22.jpg">
                        </a>
                        <h3> Tutorial 22: </h3>
                        <h2> Loading models using the Open Asset Import Library </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial23/tutorial23.html">
                                <img src="tutorial23.jpg">
                        </a>
                        <h3> Tutorial 23: </h3>
                        <h2> Shadow Mapping - Part 1 </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial24/tutorial24.html">
                                <img src="tutorial24.jpg">
                        </a>
                        <h3> Tutorial 24: </h3>
                        <h2> Shadow Mapping - Part 2 </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial25/tutorial25.html">
                                <img src="tutorial25.jpg">
                        </a>
                        <h3> Tutorial 25: </h3>
                        <h2> Skybox </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial26/tutorial26.html">
                                <img src="tutorial26.jpg">
                        </a>
                        <h3> Tutorial 26: </h3>
                        <h2> Normal Mapping </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial27/tutorial27.html">
                                <img src="tutorial27.jpg">
                        </a>
                        <h3> Tutorial 27: </h3>
                        <h2> Billboarding and the Geometry Shader </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial28/tutorial28.html">
                                <img src="tutorial28.jpg">
                        </a>
                        <h3> Tutorial 28: </h3>
                        <h2> Particle System Using Transform Feedback </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial29/tutorial29.html">
                                <img src="tutorial29.jpg">
                        </a>
                        <h3> Tutorial 29: </h3>
                        <h2> 3D Picking </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial30/tutorial30.html">
                                <img src="tutorial30.jpg">
                        </a>
                        <h3> Tutorial 30: </h3>
                        <h2> Basic Tessellation </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial31/tutorial31.html">
                                <img src="tutorial31.jpg">
                        </a>
                        <h3> Tutorial 31: </h3>
                        <h2> PN Triangles Tessellation </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial32/tutorial32.html">
                                <img src="tutorial32.jpg">
                        </a>
                        <h3> Tutorial 32: </h3>
                        <h2> Vertex Array Objects </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial33/tutorial33.html">
                                <img src="tutorial33.jpg">
                        </a>
                        <h3> Tutorial 33: </h3>
                        <h2> Instanced Rendering </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial34/tutorial34.html">
                                <img src="tutorial34.jpg">
                        </a>
                        <h3> Tutorial 34: </h3>
                        <h2> GLFX - An OpenGL Effects Library </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial35/tutorial35.html">
                                <img src="tutorial35.jpg">
                        </a>
                        <h3> Tutorial 35: </h3>
                        <h2> Deferred Shading - Part 1 </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial36/tutorial36.html">
                                <img src="tutorial36.jpg">
                        </a>
                        <h3> Tutorial 36: </h3>
                        <h2> Deferred Shading - Part 2 </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial37/tutorial37.html">
                                <img src="tutorial37.jpg">
                        </a>
                        <h3> Tutorial 37: </h3>
                        <h2> Deferred Shading - Part 3 </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial38/tutorial38.html">
                                <img src="tutorial38.jpg">
                        </a>
                        <h3> Tutorial 38: </h3>
                        <h2> Skeletal Animation With Assimp </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial39/tutorial39.html">
                                <img src="tutorial39.jpg">
                        </a>
                        <h3> Tutorial 39: </h3>
                        <h2> Silhouette Detection </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial40/tutorial40.html">
                                <img src="tutorial40.jpg">
                        </a>
                        <h3> Tutorial 40: </h3>
                        <h2> Stencil Shadow Volume </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial41/tutorial41.html">
                                <img src="tutorial41.jpg">
                        </a>
                        <h3> Tutorial 41: </h3>
                        <h2> Object Motion Blur </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial42/tutorial42.html">
                                <img src="tutorial42.jpg">
                        </a>
                        <h3> Tutorial 42: </h3>
                        <h2> Percentage Closer Filtering </h2>
                </article>

                <div class="breakpoint"></div>

                <article>
                        <a class="preview" href="www/tutorial43/tutorial43.html">
                                <img src="tutorial43.jpg">
                        </a>
                        <h3> Tutorial 43: </h3>
                        <h2> Multipass Shadow Mapping With Point Lights </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial44/tutorial44.html">
                                <img src="tutorial44.jpg">
                        </a>
                        <h3> Tutorial 44: </h3>
                        <h2> GLFW </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial45/tutorial45.html">
                                <img src="tutorial45.jpg">
                        </a>
                        <h3> Tutorial 45: </h3>
                        <h2> Screen Space Ambient Occlusion </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial46/tutorial46.html">
                                <img src="tutorial46.jpg">
                        </a>
                        <h3> Tutorial 46: </h3>
                        <h2> SSAO With Depth Reconstruction </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial47/tutorial47.html">
                                <img src="tutorial47.jpg">
                        </a>
                        <h3> Tutorial 47: </h3>
                        <h2> Shadow Mapping With Directional Lights </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial48/tutorial48.html">
                                <img src="tutorial48.jpg">
                        </a>
                        <h3> Tutorial 48: </h3>
                        <h2> User Interface with Ant Tweak Bar </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial49/tutorial49.html">
                                <img src="tutorial49.jpg">
                        </a>
                        <h3> Tutorial 49: </h3>
                        <h2> Cascaded Shadow Mapping </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial50/tutorial50.html">
                                <img src="tutorial50.jpg">
                        </a>
                        <h3> Tutorial 50: </h3>
                        <h2> Introduction to Vulkan </h2>
                </article>

                <article>
                        <a class="preview" href="www/tutorial51/tutorial51.html">
                                <img src="tutorial51.jpg">
                        </a>
                        <h3> Tutorial 51: </h3>
                        <h2> Clear Window in Vulkan </h2>
                </article>

                <article>
                  <a class="preview" href="www/tutorial52/tutorial52.html">
                    <img src="tutorial52.jpg">
                        </a>
                        <h3> Tutorial 52: </h3>
                        <h2> Vulkan Triangle </h2>
                </article>

                <article>
                  <a class="preview" href="www/tutorial53/tutorial53.html">
                    <img src="tutorial53.jpg">
                        </a>
                        <h3> Tutorial 53: </h3>
                        <h2> Semaphores and other fixes </h2>
                </article>

        </section>

        <footer id="footer">Theme by Wojciech Mleczek</footer>

<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'ogldevatspacecouk'; // required: replace example with your forum shortname
var disqus_url = 'http://ogldev.atspace.co.uk/index.html';

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</body>
</html>
